<template>
  <h1>注册</h1>
  <el-form :model="userobj" label-width="auto" style="max-width: 600px">
    <el-form-item label="用户名">
      <el-input v-model="userobj.name" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="userobj.password" />
    </el-form-item>
  </el-form>
  <el-button type="primary" @click="register">注册</el-button>
  <el-button type="primary" @click="router.push('/')">登录界面</el-button>
</template>

<script setup>
  import {ref} from "vue"
  import { useRoute, useRouter } from "vue-router";
  import axios from "axios"

  const route = useRoute()
  const router = useRouter()

  let userobj = ref({
    name: "",
    password: "",
  })

  const register=()=>{
    axios.post(`http://127.0.0.1:8000/new_login/new_login/register/`, userobj.value)
    .then(res=>{
      console.log(res)
      if(res.data.msg === "name already exist"){
        alert("名字已被使用")
      }
      else{
        alert("注册成功")
        router.push("/home")
      }
    })
  }

</script>